<template>
  <view class="container">
    <view class="top-top">
      <!-- 头部 -->
      <view class="topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <view class="top-search">
            <view class="top-srarch-img">
              <image src="../../static/resort/search.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view @click="tosearch()">
              <input placeholder="输入您的需求" type="text" class="top-search-input">
            </view>
            <view @click="tocamera()">
              <image src="../../static/resort/camera.png" mode="" style="width: 32rpx;height: 32rpx;margin-top: 20rpx;">
              </image>
            </view>
            <view class="top-search-line">

            </view>
            <view class="top-search-text">
              搜索
            </view>
          </view>
          <view class="top-but">
            <button class="topbutton" @click="topushneed()">发布需求</button>
          </view>
        </view>
      </view>
      <!-- 导航栏 -->
      <view class="nav">
        <view v-for="(item,i) in navlist" :key="i" @click="show = i"
          :class="show == i ?'navtit navtitshow':'navtitshow'">
          {{item.tit}}
        </view>
      </view>
      <!-- 导航栏 -->
      <!-- 头部 -->
    </view>
    <view style="height: 245rpx;">

    </view>
    <!-- 总体 -->
    <scroll-view class="overallbox">
      <!-- 全部区 -->
      <view class="allbox" v-show="show == 0">
        <view class="all">
          <!-- 1 -->
          <view class="allitem">
            <view>
              <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
            </view>
            <view class="allitemtext">
              <span>又大又新鲜的水果送啦
                <br />
                这里最多两行
              </span>
            </view>
            <view class="allitemthreebox">
              <view class="kmbox">
                <image src="../../static/resort/dingwei-green.png" mode=""
                  style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                <view class="kmboxtext">
                  0.56km
                </view>
              </view>
              <view class="address">
                武汉市·飞飞排档
              </view>
            </view>
            <view class="price">
              ￥2元/斤
            </view>
          </view>
          <!-- 2 -->
          <view class="allitem">
            <view style="position: relative;">
              <image src="../../static/resort/indeximg2.png" mode="" style="width: 100%;height: 310rpx;"></image>
              <image src="../../static/resort/need/stop.png"
                style="width:48rpx;height: 48rpx;position: absolute;top: 12rpx;left: 16rpx;" mode="" @click="tovideo()">
              </image>
            </view>
            <view class="voicebox">
              <view class="voicetext">
                这个地方显示的···60''
              </view>
              <view>
                <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                </image>
              </view>
            </view>
            <view class="allitemthreebox">
              <view class="kmbox">
                <image src="../../static/resort/dingwei-green.png" mode=""
                  style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                <view class="kmboxtext">
                  645km
                </view>
              </view>
              <view class="address">
                郑州市·动物园
              </view>
            </view>
            <view class="price">
              ￥5000元/吨
            </view>
          </view>
          <!-- 3 -->
          <view class="allitem">
            <view>
              <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
            </view>
            <view class="voicebox2">
              <view>
                <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                </image>
              </view>
              <view class="voicetext">
                23''
              </view>
            </view>
            <view class="allitemthreebox">
              <view class="kmbox">
                <image src="../../static/resort/dingwei-green.png" mode=""
                  style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                <view class="kmboxtext">
                  1485km
                </view>
              </view>
              <view class="address">
                上海市·东方明珠
              </view>
            </view>
            <view class="price">
              ￥8000元/月
            </view>
          </view>
          <!-- 4 -->
          <view class="allitem">
            <view>
              <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
            </view>
            <view class="allitemtext">
              <span>又大又新鲜的水果送啦
                <br />
                这里最多两行
              </span>
            </view>
            <view class="allitemthreebox">
              <view class="kmbox">
                <image src="../../static/resort/dingwei-green.png" mode=""
                  style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                <view class="kmboxtext">
                  0.56km
                </view>
              </view>
              <view class="address">
                武汉市·飞飞排档
              </view>
            </view>
            <view class="price">
              ￥2元/斤
            </view>
          </view>
          <!-- 5 -->
          <view class="allitem">
            <view>
              <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
            </view>
            <view class="voicebox2">
              <view>
                <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
                </image>
              </view>
              <view class="voicetext">
                23''
              </view>
            </view>
            <view class="allitemthreebox">
              <view class="kmbox">
                <image src="../../static/resort/dingwei-green.png" mode=""
                  style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
                <view class="kmboxtext">
                  1485km
                </view>
              </view>
              <view class="address">
                上海市·东方明珠
              </view>
            </view>
            <view class="price">
              ￥8000元/月
            </view>
          </view>
        </view>
      </view>
      <!-- 全部区 -->
      <view class="lifebox" v-show="show == 1">
        生活
      </view>
      <view class="feelbox" v-show="show == 2">
        情感
      </view>
      <view class="lawbox" v-show="show == 3">
        法律
      </view>
      <view class="healthbox" v-show="show == 4">
        健康
      </view>
      <view class="medicalbox" v-show="show == 5">
        医疗
      </view>
      <view class="startupbox" v-show="show == 6">
        创业
      </view>
    </scroll-view>
    <!-- 总体 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        href: 'https://uniapp.dcloud.io/component/README?id=uniui',
        show: 0,
        navlist: [{
            tit: "全部"
          },
          {
            tit: "生活"
          },
          {
            tit: "情感"
          },
          {
            tit: "法律"
          },
          {
            tit: "健康"
          },
          {
            tit: "医疗"
          },
          {
            tit: "创业"
          }
        ]
      }
    },
    methods: {
      tovideo() {
        uni.navigateTo({
          url: "/pages/resort/video"
        })
      },
      topushneed() {
        uni.navigateTo({
          url: "/pages/resort/pushNeed"
        })
      },
      tosearch() {
        uni.navigateTo({
          url: '/pages/resort/search'
        })
      },
      tocamera() {
        uni.navigateTo({
          url: '/pages/resort/camera'
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    position: relative;

    .top-top {
      width: 100vw;
      z-index: 99;
      position: fixed;
      top: 0;
      background-color: white;
    }

    // 头部
    .topbox {
      width: 95%;
      margin: auto;

      .top-oneitem {
        width: 100%;
        height: var(--status-bar-height);
      }

      .top-twoitem {
        height: 100rpx;
        width: 100%;
        display: flex;

        .top-search {
          display: flex;
          justify-content: space-between;
          box-sizing: border-box;
          padding: 0 15rpx;
          margin-top: 14rpx;
          width: 65%;
          height: 75rpx;
          border-radius: 50rpx;
          background-color: #F1F1F1;

          .top-search-input {
            height: 32rpx;
            margin-top: 15rpx;
            width: 250rpx;
          }

          .top-search-line {
            height: 44rpx;
            border-right: solid 1px #BBBDBD;
            margin-top: 15rpx;
          }

          .top-search-text {
            color: #58719D;
            margin-top: 13rpx;
          }
        }

        .top-but {
          width: 35%;

          .topbutton {
            line-height: 60rpx;
            color: white;
            font-size: 32rpx;
            margin-top: 20rpx;
            width: 80%;
            height: 60rpx;
            text-align: center;
            background-color: #FF2A31;
          }
        }
      }
    }

    // 导航栏
    .nav {
      color: #686868;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      margin-top: 10rpx;
      height: 68rpx;
      padding: 0 32rpx;

      .navtit {
        color: #FF2A31;
        padding-top: 10rpx;
        font-size: 32rpx;
        position: relative;
      }

      .navtitshow {
        padding-top: 10rpx;
        font-size: 32rpx;
        // position: relative;
      }

      .navtit::after {
        content: "";
        // z-index: 999;
        border-bottom: solid 4rpx #FF2A31;
        position: absolute;
        top: 60rpx;
        right: 0;
        width: 64rpx;
        height: 4rpx;
      }

    }

    // 导航栏
    // 头部
    // 总体
    .overallbox {

      // 全部区
      .allbox {
        padding-bottom: 150rpx;
        box-sizing: border-box;
        padding: 18rpx;
        width: 100vw;
        background-color: #E5E5E5;

        .all {
          width: 100%;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;

          .allitem {
            margin-bottom: 20rpx;
            width: 49%;
            padding-bottom: 20rpx;
            border-radius: 20rpx;
            background-color: white;

            .allitemtext {
              font-weight: bold;
              padding: 0 10rpx;
              box-sizing: border-box;
              font-size: 30rpx;
            }

            .voicebox {
              margin-top: 8rpx;
              margin-bottom: 10rpx;
              width: 85%;
              height: 70rpx;
              background-color: #FF6A6F;
              border-radius: 5rpx;
              margin-left: 12%;
              padding: 0 10rpx;
              box-sizing: border-box;
              display: flex;
              justify-content: space-between;
              color: white;
              line-height: 70rpx;

              .voicetext {
                font-size: 26rpx;
              }
            }

            .voicebox2 {
              margin-top: 8rpx;
              margin-bottom: 10rpx;
              width: 55%;
              height: 70rpx;
              background-color: #FF6A6F;
              border-radius: 5rpx;
              margin-left: 2%;
              padding: 0 10rpx;
              box-sizing: border-box;
              display: flex;
              justify-content: left;
              color: white;
              line-height: 70rpx;

              .voicetext {
                margin-left: 10rpx;
                font-size: 26rpx;
              }
            }

            .allitemthreebox {

              display: flex;
              justify-content: space-between;
              padding: 10rpx 10rpx;
              box-sizing: border-box;

              .kmbox {
                display: flex;

                .kmboxtext {
                  padding-left: 5rpx;
                  font-size: 26rpx;
                  color: #07C160;
                }
              }

              .address {
                font-size: 26rpx;
              }
            }

            .price {
              font-weight: bold;
              color: #FF2A31;
              font-size: 30rpx;
            }
          }
        }
      }

      // 全部区
    }

    // 总体
  }
</style>